<template>
  <el-popover v-if="tabType === 'webchat_todo'" :ref="modelData" :v-model="initPopoverShow" trigger="click" :placement="placement" width="572" :offset="-100">
    <div class="webchat_todo_iframe_msg">
      <span>{{$t('public.Url')}}：</span>
      <el-input size="mini" style="height: 22px;width: 200px" v-model="initIframe"></el-input>
      <span style="margin-left: 20px">{{$t('webchat.width')}}：</span>
      <el-input size="mini" style="height: 22px;width: 50px" :maxlength="3" v-model.trim="initIframeMsgWidth"></el-input>
      <span>px</span>
      <span style="margin-left: 20px">{{$t('webchat.height')}}：</span>
      <el-input size="mini" style="height: 22px;width: 50px" v-model.trim="initIframeMsgHeight"></el-input>
      <span>px</span>
      <el-button type="primary" class="replyMsg primary_btn" @click="handleSubmit()" size="small">{{$t('webchat.send')}}</el-button>
    </div>
    <el-tooltip class="item" effect="dark" :content="$t('webchat.sendPage')" :placement="placement" slot="reference">
      <i v-if="modelData === 'popover4'" class="msg_do iconfont icon-hulianwang" v-popover:popover4 @click="changePopover4"></i>
      <i v-else class="msg_do iconfont icon-hulianwang" v-popover:popover8 @click="changePopover4"></i>
    </el-tooltip>
  </el-popover>
</template>
<script>
  import {checkform} from '@/utils/validate'
  export default {
    name: 'sendwebPagePop',
    data () {
      return {
        initIframe: '',
        initIframeMsgWidth: '',
        initIframeMsgHeight: '',
        initPopoverShow: false
      }
    },
    props:{
      modelData: { // 外嵌地址
        type: String,
        default: ''
      },
      iframeMsgWidth: {
        type: String,
        default: ''
      },
      iframeMsgHeight: {
        type: String,
        default: ''
      },
      tabType: {
        type: String,
        default: ''
      },
      iframUrl: {
        type: String,
        default: ''
      },
      placement: {
        type: String,
        default: 'top'
      }
    },
    methods: {
      handleSubmit () {
        if (this.initIframeMsgWidth === '' || this.initIframeMsgHeight === '') {
          this.$message({
            message: this.$t('webchat.iframeMsgSizeCheck'),
            type: 'warning'
          })
          return
        }
        // 输入校验
        let urlMatch = checkform(this.initIframe, 'Url')
        let heightMatch = checkform(this.initIframeMsgWidth, 'Number')
        let widthMatch = checkform(this.initIframeMsgHeight, 'Number')
        urlMatch && this.$message({message: this.$t(urlMatch), type: 'warning'})
        heightMatch && this.$message({message: this.$t(heightMatch), type: 'warning'})
        widthMatch && this.$message({message: this.$t(widthMatch), type: 'warning'})
        if (urlMatch || heightMatch || widthMatch) {
          return false
        }
        if (this.modelData === 'popover4') {
          this.$refs.popover4.doClose()
        } else {
          this.$refs.popover8.doClose()
        }
        let iframeData = {
          iframUrl: this.initIframe,
          iframeMsgWidth: this.initIframeMsgWidth,
          iframeMsgHeight: this.initIframeMsgHeight,
        }
        this.$emit('iframeSend', iframeData)
      },
      changePopover4 () {
        window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'PM-发送网页信息'])
        this.initIframe = this.iframUrl
        this.initIframeMsgWidth = this.iframeMsgWidth
        this.initIframeMsgHeight = this.iframeMsgHeight
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
    .msg_do
      margin 0 10px 0
      float left
      color #878787
      font-size 20px
      cursor pointer
</style>